<script setup lang="ts">
import type { EquipmentClassification, EquipmentDefinition } from '@/types'

defineOptions({
  name: 'ItemComponent',
})
defineProps<{
  typeKey: string
  item: EquipmentClassification
}>()

defineSlots<{
  default: (props: { definition: EquipmentDefinition }) => any
}>()
</script>

<template>
  <TransitionGroup name="list">
    <template v-for="subItem in item.list" :key="`${typeKey}_${subItem._uuid}`">
      <slot :definition="subItem" />
    </template>
  </TransitionGroup>
</template>

<style>
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
</style>
